<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="swiper-3.2.7.min.css"/>
<link rel="stylesheet" type="text/css" href="animate.min.css"/>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{
	padding: 0;
	margin: 0;
}
html,body{
	width: 100%;
	height: 100%;
	font-size: 10px;
}
@media only screen and (min-width:360px) {
	html{
		font-size: 15px;
	}
}
@media only screen and (min-width:414px) {
	html{
		font-size: 20px;
	}
}
@media only screen and (min-width:768px) {
	html{
		font-size: 25px;
	}
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-container .word_a{
	width:22%;
	height:50%;
	position: absolute;
	left:1rem;
	top:0.6rem;
}
.swiper-container .word_b{
	width:5%;
	height:30%;
	position: absolute;
	left:9rem;
	top:12rem;
}
.swiper-container .word_c{
	width:5%;
	height:30%;
	position: absolute;
	left:11rem;
	top:16rem;
}
.swiper-container .img_a{
	width:45%;
	height:29%;
	position: absolute;
	right: 10%;
	top: 19%;
	overflow: hidden;
}
.swiper-container .img_b{
	width:14.3rem;
	height:14rem;
	position: absolute;
	right: 10%;
	top: 19%;
	overflow: hidden;
}
.swiper-container .word_d{
	width:20%;
	height:40%;
	position: absolute;
	left: 0;
	bottom:5rem;
}
.swiper-container .word_e{
	width:9rem;
	height:6rem;
	position: absolute;
	left:10rem;
	bottom:8rem;
}
.swiper-container #music{
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 999;
	width: 3rem;
	height: 3rem;
	animation: hd 3s infinite linear;
	cursor: pointer;
}
@-webkit-keyframes hd{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}

.swiper-container #bg{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 998;
	width: 50px;
	height: 50px;
}
</style>
</head>
<body>
	<audio id="aud" controls="controls" loop="loop"  autoplay="autoplay" style="display: none;">
		<source src="qmys.mp3" />
	</audio>
	<div class="swiper-container">
	    <div class="swiper-wrapper">
	    	<div class="swiper-slide">
	    		<img src="img/t_1427888354551bd8e2977b4.jpg" style="width: 100%;height: 100%;"/>
	    		<div class="bg_img" style="width: 14.5rem;height: 14.5rem;border-radius: 50%;position: absolute;top:2rem;right:1rem;">
		    		<img src="img/t_1427894645551bf17501bec.jpg"/ style="width: 100%;height: 100%;border-radius: 50%;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
	    		</div>
	    		<div class="word_a ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2s">
	    			<strong>
	    				<p style="font-family: '黑体'; font-size:6rem;margin-top:50%;margin-left:10%;margin-bottom:5%;font-weight: 700;color:#999999;">清</p>
	    			</strong>
	    			<strong>
	    				<p style="font-family:'黑体';font-size:6rem;margin-top:50%;margin-left:10%;margin-bottom:5%;font-weight: 700;color:#999999;">明</p>
	    			</strong>
	    		</div>
	    		<div class="word_b">
	    			<p style="font-family:宋体;font-size:1.3rem; color:#999999;" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="3s">在仲春与暮春之交</p>
	    		</div>
	    		<div class="word_c">
	    			<p style="font-family:宋体;font-size:1.3rem; color:#999999;" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="4s">在阴间与阳明之隔</p>
	    		</div>
	    		<div class="js" style="width:9rem;height:2rem;position: absolute;right: 2rem;bottom: 3rem;">
	    			<p style="font-size: 1rem;">作者：<span>王小爱</span></p>
	    			<p style="font-size: 1rem;">电话：18514277050</p>
	    			<p style="font-size: 1rem;">QQ：719503417</p>
	    			<p style="font-size: 1rem;">微信：wxa66666688</p>
	    		</div>
	    	</div>
	        <div class="swiper-slide" style="background: #C2C1C6">
	        	<img src="img/10594305_142138327000_2.jpg" style="width:200%;height: 200%;position: absolute;top:0;left: 0;">
	        	<div class="img_a">
	        		<img src="img/t_1427888781551bda8d5020b.jpg" style="width:100%;height:100%;border-radius:50% ;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s"/>
	        	</div>
	        	<div class="word_d ani"  swiper-animate-effect="slideInUp" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
	        		<strong>
	        			<p style="width: 100%;height: 50%;font-family:'宋体';font-size:6rem;line-height:250%;text-indent: 8%;color: #666666;">踏</p>
	        		</strong>
	        		<strong>
	        			<p style="width: 100%;height: 50%;font-family:'宋体';font-size:6rem;line-height:250%;text-indent: 8%;color: #666666;">青</p>
	        		</strong>
	        	</div>
        		<div class="word_e ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2.5s">
        			<p style="font-family: '微软雅黑';font-size:1.2rem;color: rgb(102,102,102);width: 100%;height: 100%;">清明节又叫踏青节，是中国传统节日之一，也是最重要的祭祀节日之一，是祭祖和扫墓的日子。</p>
        		</div>
        		<div class="png_a ani" style="width:2rem;height:1.5rem;position: absolute;bottom: 1.2rem; left:50%;"  swiper-animate-effect="slideInUp" swiper-animate-duration="1s" swiper-animate-delay="3.3s">
        			<img src="img/next.png" style="width: 100%;height: 100%;"/>
        		</div>
	        </div>
	        <div class="swiper-slide" style="background: #C0BFBD">
	        	<img src="img/t_1427889649551bddf1d3560.jpg"/ style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;">
	        	<div class="img_b">
	        		<img src="img/t_1427889731551bde43d4d54.jpg" style="width: 100%;height: 100%;border-radius: 50%;" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s"/>
	        	</div>	
	        	<div class="word_f ani" style="width:1.5rem;height:12rem;padding: 0 3px 0 3px; position: absolute;bottom:8rem;left: 1rem;" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="1.3s">
	        		<p style="width: 100%;height:34%;font-size:1.5rem;line-height:1rem;font-family: '宋体';color: #000000;">荡</p>
	        		<p style="width: 100%;height:34%;font-size:1.5rem;line-height:1rem;font-family: '宋体';color: #000000;">秋</p>
	        		<p style="width: 100%;height:34%;font-size:1.5rem;line-height:1rem;font-family: '宋体';color: #000000;">千</p>
	        	</div>
	        	<div class="word_g ani" style="width:16rem;height: 8rem;position: absolute;bottom:5rem;left: 4rem;padding: 0 0.5rem 0 0.5rem;"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2s">
	        		<p style="font-size: 1.4rem;">这是中国古代清明节习俗。秋千，意即揪着皮绳而迁移。它的历史很古老，最早叫千秋，后为了避忌讳，改之为秋千。</p>
	        	</div>
	        	<div class="png_a ani" style="width:2rem;height:1.5rem;position: absolute;bottom: 1.2rem; left:50%;"  swiper-animate-effect="slideInUp" swiper-animate-duration="1s" swiper-animate-delay="2.8s">
        			<img src="img/next.png" style="width: 100%;height: 100%;"/>
        		</div>
	        </div>
	        <div class="swiper-slide" style="background: #526A5D">
	        	<img src="img/t_1427890579551be19325a5a.jpg"/ style="width: 100%;height: 100%;">
	        	<div class="img_c ani" style="width:14rem;height:14rem;border-radius:50%;position: absolute;top:9rem;left:4rem;overflow: hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
	        		<img src="img/t_1427890647551be1d70dd52.jpg" style="width: 100%;height: 100%;"/>
	        	</div>
	        	<div class="word_f ani" style="width:1.5rem;height:12rem;padding: 0 3px 0 3px; position: absolute;bottom:4rem;left: 1rem;" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="1.3s">
	        		<p style="width: 100%;height:34%;font-size:1.5rem;line-height:1rem;font-family: '宋体';color: #000000;">蹴</p>
	        		<p style="width: 100%;height:34%;font-size:1.5rem;line-height:1rem;font-family: '宋体';color: #000000;">鞠</p>
	        	</div>
	        	<div class="word_g ani" style="width:13rem;height: 8rem;position: absolute;bottom:5rem;left: 4rem;padding: 0 0.5rem 0 0.5rem;"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2s">
	        		<p style="font-size: 1.4rem;">鞠是一种皮球，蹴鞠，就是用足去踢球。这是古代清明节时人们喜爱的一种游戏。</p>
	        	</div>
	        	<div class="png_a ani" style="width:2rem;height:1.5rem;position: absolute;bottom: 1.2rem; left:50%;"  swiper-animate-effect="slideInUp" swiper-animate-duration="1s" swiper-animate-delay="2.8s">
        			<img src="img/next.png" style="width: 100%;height: 100%;"/>
        		</div>
	        </div>
	        <div class="swiper-slide" style="background: #E7E5D6">
	        	<img src="img/t_145830474356ebf6e735fd7.jpg"/ style="width: 100%;height: 100%;">
	        	<div class="img_c ani" style="width:16rem;height:16rem;border-radius:50%;position: absolute;top:6rem;left:5rem;overflow: hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
	        		<img src="img/t_1427891921551be6d130f1e.jpg" style="width: 100%;height: 100%;"/>
	        	</div>
	        	<div class="word_f ani" style="width:1.5rem;height:12rem;padding: 0 3px 0 3px; position: absolute;bottom:1rem;left: 1rem;" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="1.3s">
	        		<p style="width: 100%;height:34%;font-size:1.5rem;line-height:1rem;font-family: '宋体';color: #000000;">扫</p>
	        		<p style="width: 100%;height:34%;font-size:1.5rem;line-height:1rem;font-family: '宋体';color: #000000;">墓</p>
	        	</div>
	        	<div class="word_g ani" style="width:9rem;height: 8rem;position: absolute;bottom:4rem;left: 4rem;padding: 0 0.5rem 0 0.5rem;"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2s">
	        		<p style="font-size: 1.4rem;">清明扫墓，谓之对祖先的“思时之敬”，其习俗由来已久。</p>
	        	</div>
	        	<div class="png_a ani" style="width:2rem;height:1.5rem;position: absolute;bottom: 1.2rem; left:50%;"  swiper-animate-effect="slideInUp" swiper-animate-duration="1s" swiper-animate-delay="2.8s">
        			<img src="img/next.png" style="width: 100%;height: 100%;"/>
        		</div>
	        </div>
	        <div class="swiper-slide" style="background: #DDEBEC">
	        	<img src="img/t_145830472456ebf6d4554b4.jpg"/ style="width: 100%;height: 100%;">
	        	<div class="img_c ani" style="width:12rem;height:12rem;border-radius:50%;position: absolute;top:1rem;right:1rem;overflow: hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
	        		<img src="img/file_551bedec2ccd1.jpg" style="width: 100%;height: 100%;"/>
	        	</div>
	        	<div class="img_c ani" style="width:12rem;height:12rem;border-radius:50%;position: absolute;top:13rem;right:3rem;overflow: hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
	        		<img src="img/t_1427893790551bee1eb13b4.jpg" style="width: 100%;height: 100%;"/>
	        	</div>
	        	<div class="img_c ani" style="width:12rem;height:12rem;border-radius:50%;position: absolute;top:26rem;right:2rem;overflow: hidden;" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
	        		<img src="img/t_1427893884551bee7c8efcd.jpg" style="width: 100%;height: 100%;"/>
	        	</div>
	        	<div class="word_d ani" style="position: absolute;top:2rem;left: 1rem;" swiper-animate-effect="slideIndown" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
	        		<strong>
	        			<p style="width: 100%;height: 30%;font-family:'宋体';font-size:3rem;font-weight:700;line-height:250%;text-indent: 8%;color: #666666;">清</p>
	        		</strong>
	        		<strong>
	        			<p style="width: 100%;height: 30%;font-family:'宋体';font-size:3rem;line-height:250%;text-indent: 8%;color: #666666;">明</p>
	        		</strong>
	        		<strong>
	        			<p style="width: 100%;height: 30%;font-family:'宋体';font-size:3rem;line-height:250%;text-indent: 8%;color: #666666;">饮</p>
	        		</strong>
	        		<strong>
	        			<p style="width: 100%;height: 30%;font-family:'宋体';font-size:3rem;line-height:250%;text-indent: 8%;color: #666666;">食</p>
	        		</strong>
	        	</div>
	        </div>
	    </div>
	    <!--音乐图片-->
	    <img src="img/music.png" id="music"/>
	    <!--音乐背景图-->
	    <img src="img/music_fly.gif" id="bg"/>
	    <script type="text/javascript">
//	    	抓取音乐控件
			var aud = document.getElementById("aud");
//	    	抓取音乐背景图
			var t = document.getElementById("music"); 
			var b=0			
			t.onclick=function(){ 
				if(b==0){
					t.style.animation='dsf 3s infinite linear';
					aud.pause(); 
					b=1;
				}else{
					t.style.animation='hd 3s infinite linear';
					aud.play(); 
					b=0;
				}
			}
	    </script>
	    <!-- 如果需要分页器 -->
	    <div class="swiper-pagination"></div>
	</div>	
<script type="text/javascript" src="swiper.animate1.0.2.min.js"></script>	
<script type="text/javascript" src="swiper-3.2.7.min.js"></script>	
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
////  自动轮播
	autoplay : 8000,
	autoplayDisableOnInteraction :false,
    // 如果需要分页器
    pagination: '.swiper-pagination',
    onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
	    swiperAnimateCache(swiper); //隐藏动画元素 
	    swiperAnimate(swiper); //初始化完成开始动画
	  }, 
	  onSlideChangeEnd: function(swiper){ 
	    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	 }
  })        
</script>
</body>
</html>
